<template>
    <div>
      <div class="paging">
        <ul>
          <li
            class="iconfont icon-shangyiyehoutuifanhui"
            @click="clickIcon(-1)"
          ></li>
          <li
            v-for="(item, index) in pages"
            :key="index"
            :class="{ active: item === currentPage }"
            @click="select(item)"
          >
            {{ item }}
          </li>
          <li
            class="iconfont icon-xiayiyeqianjinchakangengduo"
            @click="clickIcon(1)"
          ></li>
        </ul>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "Paging",
    // 总页数  请求函数  重新加载依据
    props:['totalPages','pagingMethod','load'],
    data() {
      return {
        currentPage: 1,
      };
    },
    computed: {
      pages() {
        const c = this.currentPage;
        let t = this.totalPages;
        if( t < 11){
            return t;
        }
        if (c < 5) {
          return [1, 2, 3, 4, 5, 6, 7, 8, 9, "...", t];
        } else if (c >= t - 4) {
          return [
            1,
            "...",
            t - 8,
            t - 7,
            t - 6,
            t - 5,
            t - 4,
            t - 3,
            t - 2,
            t - 1,
            t,
          ];
        } else {
          return [
            1,
            "...",
            c - 3,
            c - 2,
            c - 1,
            c,
            c + 1,
            c + 2,
            c + 3,
            "...",
            t,
          ];
        }
      },
    },
    methods: {
      select(index) {
        if (index === this.currentPage) return;
        if (typeof index === "string") return; //如果是... 不跳转
        this.currentPage = index;
        this.pagingMethod(this.currentPage);
      },
      clickIcon(n) {
        this.currentPage += n;
        if (this.currentPage < 1) this.currentPage = 1;
        if (this.currentPage > this.totalPages)
          this.currentPage = this.totalPages;
        this.pagingMethod(this.currentPage);
      },
    },
    watch:{
      load(){
        this.currentPage = 1;
      }
    }
  };
  </script>
  
  <style scoped lang="scss">
  .paging {
    width: 700px;
    margin: 0px auto;
    ul {
      width: 100%;
      display: flex;
      justify-content: center;
      li {
        height: 30px;
        padding: 0 6px;
        min-width: 18px;
        border-radius: 5px;
        text-align: center;
        border: 1px solid #ccc;
        font-size: 22px;
        margin-right: 5px;
        line-height: 30px;
        color: #999;
        cursor: pointer;
      }
      li:hover {
        background-color: rgb(245, 245, 245);
        color: #000;
      }
      li.iconfont {
        font-size: 14px;
        font-weight: bold;
        color: black;
      }
      li.active {
        min-width: 20px;
        background-color: rgb(255,204,0);
        height: 32px;
        line-height: 32px;
        border: none;
        color: white;
      }
    }
  }
  </style>